{extend name="base" /}

{block name="title"} 管理员列表 {/block}


{block name="body"}
<div class="col-lg-12">

    <section class="panel">
        <header class="panel-heading">  
            <span class="mg-r-md">
                条件筛选
            </span>
            <small class="pull-right">
                <a class="fa fa-chevron-down panel-collapsible pd-r-xs" href="javascript:;"></a>
                <a class="fa fa-times panel-remove" href="javascript:;"></a>
            </small>
        </header>
        <div class="panel-body">
            <form class="form-inline form-search" role="form">

                <div class="form-group mg-t-xs">
                    <label>用户名</label>
                    <input type="text" class="form-control" name="username" placeholder="用户名">
                </div>
                
                <div class="form-group mg-t-xs">
                    <label>昵称</label>
                    <input type="text" class="form-control" name="nickname" placeholder="昵称">
                </div>
                
                <div class="form-group mg-t-xs">
                    <label>邮箱</label>
                    <input type="email" class="form-control" name="email" placeholder="邮箱">
                </div>

                <div class="form-group col-xs-12 col-md-12 mg-t-xs">
                    <button type="button" class="btn btn-success btn-sm col-xs-12 col-sm-2 col-md-1" onclick="Table.methods.refresh()">搜索</button>
                </div>

            </form>
        </div>

    </section>


    <!-- bootstrap-table工具栏 -->
    <div class="row">
        <!-- 工具栏 -->
        <div class="" id="toolbar">
            <button type="button" class="btn btn-sm btn-info" onclick="Table.methods.add()">
                <i class="fa fa-plus"></i>
                <span class="hidden-xs">添 加</span>
            </button>
            <button type="button" class="btn btn-sm btn-danger hidden-xs" onclick="Table.methods.dels()">
                <i class="fa fa-trash"></i>
                <span class="hidden-xs">删 除</span>
            </button>
        </div>
    </div>


    <section class="panel">
        <header class="panel-heading">列表</header>
        <div class="panel-body">
            <div class="table-responsive">
                <table class="table table-hover table-striped no-margin" id="table"> </table>
            </div>
        </div>
    </section>


</div>
    
{/block}


<!-- js -->
{block name="js"}

<!-- bootstrap-table -->
<!-- <link href="/static/admin/vendor/bootstrap-table/bootstrap-table.min.css" rel="stylesheet"> -->
<script src="/static/admin/vendor/bootstrap-table/bootstrap-table.min.js"></script>

<!-- 汉化包 -->
<script src="/static/admin/vendor/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>

<!-- tableExport 导出插件 -->
<script src="/static/admin/vendor/bootstrap-table/extensions/bootstrap-table-export.min.js"></script>
<script src="/static/admin/vendor/bootstrap-table/extensions/tableExport/tableExport.min.js"></script>

<!-- 导出插件 -->
<script src="/static/admin/vendor/bootstrap-table/extensions/tableExport/libs/FileSaver/FileSaver.min.js"></script>
<script src="/static/admin/vendor/bootstrap-table/extensions/tableExport/libs/js-xlsx/xlsx.core.min.js"></script>
<script src="/static/admin/vendor/bootstrap-table/extensions/tableExport/libs/jsPDF/jspdf.min.js"></script>
<script src="/static/admin/vendor/bootstrap-table/extensions/tableExport/libs/jsPDF-AutoTable/jspdf.plugin.autotable.js"></script>
<script src="/static/admin/vendor/bootstrap-table/extensions/tableExport/libs/es6-promise/es6-promise.auto.min.js"></script>
<script src="/static/admin/vendor/bootstrap-table/extensions/tableExport/libs/html2canvas/html2canvas.min.js"></script>

<!-- 跳到指定页数 jumpto -->
<link rel="stylesheet" href="/static/admin/vendor/bootstrap-table/extensions/page-jumpto/bootstrap-table-jumpto.css">
<script src="/static/admin/vendor/bootstrap-table/extensions/page-jumpto/bootstrap-table-jumpto.js"></script>

<!-- 打印插件 -->
<script src="/static/admin/vendor/bootstrap-table/extensions/bootstrap-table-print.js"></script>

<!-- 拷贝行数 copy-rows -->
<script src="/static/admin/vendor/bootstrap-table/extensions/bootstrap-table-copy-rows.js"></script>

<script>
// 表格数据
var table_config = {
    url: "{:url('index')}",             //请求后台的URL（*）
    method: 'GET',                      //请求方式（*）
    toolbar: '#toolbar',                //工具按钮用哪个容器
    striped: true,                      //是否显示行间隔色
    cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
    sortable: true,                     //是否启用排序
    sortOrder: "asc",                   //排序方式
    pagination: true,                   //是否显示分页（*）
    sidePagination: "server",           //分页方式：client 客户端分页，server 服务端分页（*）
    pageNumber: 1,                      //初始化加载第一页，默认第一页,并记录
    pageSize: 10,                        //每页的记录行数（*）
    pageList: [5, 10, 25, 50, 100],     //可供选择的每页的行数（*）
    search: false, //是否显示表格搜索
    strictSearch: false,
    searchOnEnterKey: true,

    showPrint: true,    //打印
    showJumpto: true, //分页跳转
    
    // copyBtn: true,  //复制

    showExport: true, 
    exportDataType: "basic",              //basic', 'all', 'selected'
    // 'json', 'xml', 'png', 'csv', 'txt', 'sql', 'doc', 'excel', 'xlsx', 'pdf','powerpoint'
    exportTypes: ['csv', 'xlsx', 'excel', 'doc', 'png', 'sql', 'json', 'xml', 'txt' ],
    exportOptions:{
        ignoreColumn: [0,-1],  //忽略某一列的索引
        // ignoreRow: [0,1],
        fileName: '文件名',  //文件名称设置
        worksheetName: 'sheet1',  //表格工作区名称
        tableName: '文件名',
        excelstyles: ['background-color', 'color', 'font-size', 'font-weight'],
        jsonScope: 'all',
        csvEnclosure: '"',
        csvSeparator: ',',
        csvUseBOM: true,
        displayTableName: false,
        escape: false,
        exportHiddenCells: false,
    },

    showColumns: true,                  //是否显示所有的列（选择显示的列）
    showRefresh: true,                  //是否显示刷新按钮
    minimumCountColumns: 2,             //最少允许的列数
    clickToSelect: true,                //是否启用点击选中行
    // uniqueId: "ID",                     //每一行的唯一标识，一般为主键列
    showToggle: true,                   //是否显示详细视图和列表视图的切换按钮
    cardView: false,                    //是否显示详细视图
    detailView: false,                  //是否显示父子表
    checkboxHeader: true,               //设置 false 将在列头隐藏全选复选框
    buttonsClass: 'default',
    iconSize: 'md',
    iconsPrefix: 'fa',

    icons: {
        refresh: 'fa-refresh',
        export: 'fa-download',
        toggle: 'fa-columns',
        columns: 'fa-list-ul',
        print: 'fa-print',
    },

    //得到查询的参数
    queryParams : function (params) {
        //这里的键的名字和控制器的变量名必须一致，这边改动，控制器也需要改成一样的
        var data = $(".form-search").serializeArray();
        var temp = {   
            rows: params.limit,                         //页面大小
            page: (params.offset / params.limit) + 1,   //页码
            sort: params.sort,      //排序列名  
            sortOrder: params.order, //排位命令（desc，asc）
            data: arrayToJson(data),
            keyword: params.search
        };
        return temp;
    },
    columns: [
        {
            checkbox: true,  
            visible: true,
            printIgnore: true
        }, 
        {
            field: 'id',
            title: 'ID',
            sortable: true,
            printIgnore: true
        },
        {
            field: 'add_time',
            title: '操作',
            // formatter: Table.formatter.operate,
            printIgnore: true
        }
     ],
    onLoadSuccess: function () {
        // console.log("数据加载完毕！");
    },
    onLoadError: function () {
        console.log( "数据加载失败！" );
    },
    onDblClickRow: function (row, $element) {
        // console.log(row);
    },
};

$('#table').bootstrapTable(table_config);

// 重复输出字符串
function repeat(src, n) {
    return (n > 0) ? src.concat(repeat(src, --n)):"";
}

// 数组转json
function arrayToJson(data){
    var tempObject = {};
    data.forEach(function(val,index,array){
        tempObject[val.name] = val.value;
        // console.log(val.value);
    });
    return tempObject;
}


</script>
{/block}